import styled from "styled-components";

export const StyledPhonicsWrapper = styled.div`
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(4, 1fr);
text-align: center;
margin-bottom: 8px;
`;

export const StyledPhonics = styled.div`
cursor: pointer;
background: ${props => props.bgColor || "pink"};
color: ${props => props.fgColor || "pink"};
font-family: 'Comic Neue', cursive;
height: 25px;
line-height: 25px;
font-size: 18px;
box-shadow: 1px 2px gray;
border-radius: 3px;
opacity: .95;
font-weight: bold;
&:hover {
  opacity: 1;
}
@media only screen and (min-height: 768px) {
    height: 30px;
    line-height: 30px;
    font-size: 22px;
}
`;

export const StyledPhonicsPanel = styled.div`
width: 350px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-right: 8px;
@media only screen and (min-height: 768px) {
    width: 450px;
}
@media only screen and (max-width: 960px) {
    display: none;
}
`;
